<template>
	<!-- 自定义导航栏 -->
	<CustomNavBar title="伙伴匹配,在这里可以寻找志同道合的朋友" />
	<up-cell-group>
		<up-cell title="心动模式">
			<template #right-icon>
				<up-switch v-model="isMatchMode"></up-switch>
			</template>
		</up-cell>
	</up-cell-group>
	<UserCardList :userList="userList" :loading="loading" />
	<template v-if="!isMatchMode">
		<up-empty v-if="!userList || userList.length<1" text="无符合的队伍"
			icon="/static/emptyData.png">
		</up-empty>
	</template>

</template>

<script setup lang="ts">
	import UserCardList from "@/components/UserCardList.vue";
	import myAxios from "@/plugins/myAxios"; // 保持引用
	import { ref, watchEffect } from "vue";
	import CustomNavBar from '@/components/CustomNavBar.vue';
	// 定义响应式变量
	const userList = ref([]);
	const isMatchMode = ref<boolean>(false);
	const loading = ref<boolean>(true);
	const currentPage = ref(1);

	// 加载数据函数
	const loadData = async () => {
		let userListData;
		loading.value = true;

		try {
			if (isMatchMode.value) {
				const num = 5;
				const response = await myAxios.get('/user/match', {
					num,
				});
				console.log(response);

				// 使用 UniApp 的 showToast 显示成功提示
				uni.showToast({
					title: "开启心动模式",
					icon: 'success',
					duration: 2000,
				});

				userListData = response?.data;
			} else {
				const response = await myAxios.get('/user/recommend', {
					pageNum: currentPage.value,
					pageSize: 15,
				});
				console.log(response);

				if (response?.data === null) {
					// 使用 UniApp 的 showToast 显示失败提示
					uni.showToast({
						title: response.description ? `${response.description}` : '暂无数据',
						icon: 'none',
						duration: 2000,
					});
					userListData = [];
				} else {
					userListData = response?.data;
				}
			}
			userListData = userListData.filter(item => {
				if(item.userRole != 1){
					return true;
				}
			})
			console.log(userListData)
			userList.value = userListData
		} catch (error) {
			console.error("请求失败:", error);

			// 使用 UniApp 的 showToast 显示失败提示
			uni.showToast({
				title: "请求失败，请稍后重试",
				icon: 'none',
				duration: 2000,
			});
		} finally {
			loading.value = false;
		}
	};

	// 监听相关响应式数据的变化以重新加载数据
	watchEffect(() => {
		loadData();
	});
</script>

<style scoped>
	/* 添加您的样式 */
</style>